style: Handle sections in submenus

If a menu item in a submenu is part of a section, it should have
rounded bottom corners if both the item and the section are the
last child of its respective parent.

To express that, add a new .popup-menu-section class and use that
to undo/redo the rounding for items inside a section.

It would be possible to do without a new class with a selector like

 > StBoxLayout > .popup-menu-item:last-child:hover,
 :last-child > .popup-menu-item:last-child:hover

but that's hardly better with its heavy reliance on implementation
details.

https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/4940

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2126>

diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index f523ec6dd082ebb84eab042c136def0688f28df9..3ddca4f2420bbdee2d190c566958dd743e6568f2 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -139,6 +139,13 @@
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
   }
+
+  .popup-menu-section {
+    .popup-menu-item:last-child:hover { border-radius: 0 }
+    &:last-child .popup-menu-item:last-child:hover {
+      border-radius: 0 0 $base_border_radius $base_border_radius;
+    }
+  }
 }
 
 // container for radio and check boxes

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index f9c3df0bf19cb401e455edcf251f9c783b0316c5..0cb4970c1fd3bd370c5abf9955e679bdf9f72323 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -1165,6 +1165,8 @@ var PopupMenuSection = class extends PopupMenuBase {
         this.actor = this.box;
         this.actor._delegate = this;
         this.isOpen = true;
+
+        this.actor.add_style_class_name('popup-menu-section');
     }
 
     // deliberately ignore any attempt to open() or close(), but emit the